<template>
  <div id="app">
    <img src="./assets/imgs/bcsz.png" alt="" />
  </div>
</template>
    
    <script>
import * as PIXI from "pixi.js";
export default {
  setup() {
    const app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "white",
      resolution: window.devicePixelRatio || 1,
    });
    document.body.appendChild(app.view);

    let texture = PIXI.Texture.from(require("./assets/imgs/bcsz.png"));

    let sprite = new PIXI.Sprite(texture);

    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;

    sprite.rotation = Math.PI / 4;
    sprite.anchor.set(0.5, 0.5); //注意0.5的意思是50%不是px值
    sprite.scale.set(2, 2);
    sprite.alpha = 0.8;
    app.ticker.add((delta) => {
      sprite.rotation += 0.05 * delta;
    });

    // 为精灵添加点击事件，要先把这个东西的interactive设置为true，代表它可以被添加事件
    sprite.interactive = true;
    // 可以通过on(事件名称,回调函数)的方式，也可以通过 元素.on事件名称 = 回调函数; 的方式进行事件绑定，其实和原生dom绑事件差不多
    sprite.on("click", () => {
      console.log("精灵图");
    });

    // 创建一个矩形
    let rect = new PIXI.Graphics();
    rect.beginFill(0xfbc2eb);
    rect.drawRect(100, 100, 200, 200);
    rect.endFill();
    // 矩形也一样，把interactive设置为true，代表可以添加事件
    rect.interactive = true;
    rect.onclick = function () {
      console.log(123);
    };

    app.stage.addChild(sprite);
    app.stage.addChild(rect);
  },
};
</script>
    
    <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
    